<template>
  <view class="page-container">
    <u-grid :border="false"  col="2">
      <u-grid-item
          v-for="(item, baseListIndex) in baseList"
          :key="baseListIndex"
          style="margin-top: 10px"
          @click="toDetail(item)"
      >
        <view class="consult-item consult-item1" style="margin-top: 0.5rem">
          <image :src="item.pic" mode="heightFix" />
        </view>
      </u-grid-item>
    </u-grid>
    <u-loadmore :status="status" @loadmore="loadMore"/>
  </view>
</template>
<script>
import PHOTO from "@/static/const/photo";
import {getImgUrl, isEmptyArray} from "@/utils/common";

export default {
  data() {
    return {
      baseList: [],
      status: 'loadmore',
      params:{
        type:PHOTO.POSTER,
        current:1,
        size:10
      }
    };
  },
  onLoad(options) {
    this.getList();
  },
  methods: {
    getList() {
      this.params.current=1;
      this.$store
          .dispatch("GetAboutMeList",this.params )
          .then((res) => {
            console.log(res);
            this.baseList = res.data.records;
            if(!isEmptyArray(this.baseList)){
              this.baseList.forEach((item)=>{
                const arr=getImgUrl(item.content);
                item.pic = arr[0];
              })
            }
            if(res.data.total<=this.baseList.length) {
              this.status = 'nomore';
            }else{
              this.status = 'loadmore';
            }
          });
    },
    toDetail(item) {
     //将item.id存入到state中
     uni.redirectTo({
       url: '/pages/invite/posterShare/index?id='+item.id
     })
    },
    loadMore() {
      this.status = 'loading';
      this.params.current++;
      this.$store
          .dispatch("GetAboutMeList",this.params )
          .then((res) => {
            console.log(res);
            let tempArr = res.data.records;
            if(!isEmptyArray(tempArr)){
              tempArr.forEach((item)=>{
                const arr=getImgUrl(item.content);
                item.pic = arr[0];
              })
            }
            this.baseList = this.baseList.concat(tempArr);
            if(res.data.total<=this.baseList.length) {
              this.status = 'nomore';
            }else{
              this.status = 'loadmore';
            }
          });

    },
  },
};
</script>
<style scoped lang="scss">
.page-container {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f7fa;
  padding-bottom: 5rem;
  .grid-content {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    min-height: 11rem;
  }
  .card-wrapper {
    display: flex;
    flex-direction: column;
  }
  .consult-item {
    width: 95%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    border-radius: 10px;
    overflow: hidden;

  }
  image {
    width: 100%;
  }
  .consult-item1 {
    //min-height: 11rem;
    padding-bottom: 1rem;
    box-sizing: border-box;
  }
}
</style>
